// 垂直菜单工具

// Item
@mixin e-menu-ver-item-base($item) {
	// item
	@include e-attr(margin, e-get($item, self, margin));
	@include e-attr(padding, e-get($item, self, padding));

	// item
	> .e-menu-link {
		cursor: pointer;
		height: e-get($item, link, self, height);
		@include e-attr(margin, e-get($item, link, self, margin));

		// 链接文字
		.e-menu-link-text {
			font-weight: e-get($item, link, text, font-weight);
			font-size: e-get($item, link, text, font-size);
			text-transform: e-get($item, link, text, font-transform);
		}

		// 图标
		.e-menu-link-icon {
			text-align: e-get($item, link, icon, align);
			flex: 0 0 e-get($item, link, icon, width);
			font-size: e-get($item, link, icon, font-size);

			// svg
			svg {
				@include e-attr(height, e-get($item, link, icon, svg-width));
				@include e-attr(width, e-get($item, link, icon, svg-width));
				margin-left: -2px;
			}
		}

		// 菜单左侧横线 & 圆点
		.e-menu-link-bullet {
			vertical-align: middle;
			text-align: left;
			flex: 0 0 e-get($item, link, bullet, self, width);

			> span {
				vertical-align: middle;
				display: inline-block;
			}

			&.e-menu-link-bullet--dot {
				> span {
					width: e-get($item, link, bullet, dot, size);
					height: e-get($item, link, bullet, dot, size);
					border-radius: 100%;
				}
			}

			&.e-menu-link-bullet--line {
				> span {
					width: e-get($item, link, bullet, line, width);
					height: e-get($item, link, bullet, line, height);
				}
			}
		}

		// 徽章
		.e-menu-link-badge {
			padding: e-get($item, link, badge, padding);
			text-align: e-get($item, link, badge, align);
		}

		// 右侧箭头
		.e-menu-ver-arrow {
			text-align: e-get($item, link, arrow, align);
			flex: 0 0 e-get($item, link, arrow, width);
			font-size: e-get($item, link, arrow, font-size);

			&:before {		
				display: inline-block;
				transition: e-get($item, link, arrow, transition);

				[direction="rtl"] & {
					content: "#{e-get($e-action-icons, left)}" !important;
				}
			}
		}

		// menu root level "here" arrow
		.e-menu-item-here {
			display: none;
		}

		// 圆角
		@include e-rounded {
			@include e-attr(border-radius, e-get($item, link, self, border-radius));
		}
	}	

	// 打开状态
	&.e-menu-item--open {
		> .e-menu-link {
			// 右侧箭头
			.e-menu-ver-arrow {
				&:before {							
					transition: e-get($item, link, arrow, transition);
				}
			}
		}
	}
}
// Item 皮肤
@mixin e-menu-ver-item-skin($item) {
	// item	
	@include e-attr(background-color, e-get($item, self, bg-color, default));

	// item
	> .e-menu-link {
		// 链接文字
		.e-menu-link-text {
			@include e-attr(color, e-get($item, link, text, font-color, default));
			@if e-has($item, link, text, font-weight) {
				font-weight: e-get($item, link, text, font-weight);
			} 
		}

		// 图标
		.e-menu-link-icon {
			@include e-attr(color, e-get($item, link, icon, font-color, default));

			// svg
			svg {
				@include e-svg-icon-color(e-get($item, link, icon, font-color, default));
			}
		}

		// 菜单左侧图标 横线 & 圆点
		.e-menu-link-bullet {

			&.e-menu-link-bullet--dot {
				> span {
					@include e-attr(background-color, e-get($item, link, bullet, dot, bg-color, default));
				}
			}

			&.e-menu-link-bullet--line {
				> span {
					@include e-attr(background-color, e-get($item, link, bullet, line, bg-color, default));
				}
			}
		}

		// 右侧箭头
		.e-menu-ver-arrow {
			@include e-attr(color, e-get($item, link, arrow, font-color, default));
		}
	}

	// 打开的子菜单
	&.e-menu-item--open {
		transition: background-color .3s;
		@include e-attr(background-color, e-get($item, self, bg-color, open));

		> .e-menu-link {
			@include e-attr(background-color, e-get($item, link, self, bg-color, open));

			// 链接文字
			.e-menu-link-text {
				@include e-attr(color, e-get($item, link, text, font-color, open));
			}

			// 徽章
			.e-menu-link-icon {
				@include e-attr(color, e-get($item, link, icon, font-color, open));

				// Due-tone icon
				svg {
					@include e-svg-icon-color(e-get($item, link, icon, font-color, open));
				}
			}

			// 菜单左侧横线 & 圆点
			.e-menu-link-bullet {
				&.e-menu-link-bullet--dot {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, dot, bg-color, open));
					}
				}

				&.e-menu-link-bullet--line {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, line, bg-color, open));
					}
				}
			}

			// 右侧箭头
			.e-menu-ver-arrow {
				@include e-attr(color, e-get($item, link, arrow, font-color, open));
			}
		}
	}

	// 打开状态
	&.e-menu-item--here {
		transition: background-color .3s;
		@include e-attr(background-color, e-get($item, self, bg-color, here));

		> .e-menu-link {
			@include e-attr(background-color, e-get($item, link, self, bg-color, here));

			// 链接文字
			.e-menu-link-text {
				@include e-attr(color, e-get($item, link, text, font-color, here));
			}

			// 徽章
			.e-menu-link-icon {
				@include e-attr(color, e-get($item, link, icon, font-color, here));

				// Due-tone icon
				svg {
					@include e-svg-icon-color(e-get($item, link, icon, font-color, here));
				}
			}

			// 菜单左侧横线 & 圆点
			.e-menu-link-bullet {
				&.e-menu-link-bullet--dot {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, dot, bg-color, here));
					}
				}

				&.e-menu-link-bullet--line {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, line, bg-color, here));
					}
				}
			}

			// 右侧箭头
			.e-menu-ver-arrow {
				@include e-attr(color, e-get($item, link, arrow, font-color, here));
			}
		}
	}	

	// item link active state
	&.e-menu-item--active {
		transition: background-color .3s;
		@include e-attr(background-color, e-get($item, self, bg-color, active));

		> .e-menu-link {
			@include e-attr(background-color, e-get($item, link, self, bg-color, active));

			// 链接文字
			.e-menu-link-text {
				@include e-attr(color, e-get($item, link, text, font-color, active));
			}

			// 徽章
			.e-menu-link-icon {
				@include e-attr(color, e-get($item, link, icon, font-color, active));

				// Due-tone icon
				svg {
					@include e-svg-icon-color(e-get($item, link, icon, font-color, active));
				}
			}

			// 菜单左侧横线 & 圆点
			.e-menu-link-bullet {
				&.e-menu-link-bullet--dot {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, dot, bg-color, active));
					}
				}

				&.e-menu-link-bullet--line {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, line, bg-color, active));
					}
				}
			}

			// 右侧箭头
			.e-menu-ver-arrow {
				@include e-attr(color, e-get($item, link, arrow, font-color, active));
			}
		}
	}

	// item link hover state
	&:not(.e-menu-item--parent):not(.e-menu-item--open):not(.e-menu-item--here):not(.e-menu-item--active):hover {
		transition: background-color .3s;
		@include e-attr(background-color, e-get($item, self, bg-color, hover));

		> .e-menu-link {
			@include e-attr(background-color, e-get($item, link, self, bg-color, hover));

			// 链接文字
			.e-menu-link-text {
				@include e-attr(color, e-get($item, link, text, font-color, hover));
			}

			// 徽章
			.e-menu-link-icon {
				@include e-attr(color, e-get($item, link, icon, font-color, hover));

				// Due-tone icon
				svg {
					@include e-svg-icon-color(e-get($item, link, icon, font-color, hover));
				}
			}

			// 菜单左侧横线 & 圆点
			.e-menu-link-bullet {
				&.e-menu-link-bullet--dot {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, dot, bg-color, hover));
					}
				}

				&.e-menu-link-bullet--line {
					> span {
						@include e-attr(background-color, e-get($item, link, bullet, line, bg-color, hover));
					}
				}
			}

			// 右侧箭头
			.e-menu-ver-arrow {
				@include e-attr(color, e-get($item, link, arrow, font-color, hover));
			}
		}
	}	
}

// 收起状态
@mixin e-menu-ver-minimize-parent-item-base($item) {
	// item
	margin: e-get($item, self, margin);

	// item
	> .e-menu-link {
		height: e-get($item, link, self, height);
		padding: e-get($item, link, self, padding);

		// 链接文字
		.e-menu-link-text {
			font-weight: e-get($item, link, text, font-weight);
			font-size: e-get($item, link, text, font-size);
			text-transform: e-get($item, link, text, font-transform);
			cursor: text !important;
		}

		// 徽章
		.e-menu-link-badge {
			padding: e-get($item, link, badge, padding);
			text-align: e-get($item, link, badge, align);
		}
	}
}

@mixin e-menu-ver-minimize-parent-item-skin($item) {
	// item 背景色
	@include e-attr(background-color, e-get($item, self, bg-color, default));

	// item 文字颜色
	> .e-menu-link {
		> .e-menu-link-text {
			@include e-attr(color, e-get($item, link, text, font-color, default));
		}
	}
}

// Base
@mixin e-menu-ver-base($base-config, $layout) {
	.#{e-get($base-config, class)} {
		// ul.e-menu-nav
		.e-menu-nav {
			margin: 0;
			list-style: none;
			padding: e-get($layout, default, self, padding);

			// Base markup
			.e-menu-scroll {
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column; 
				flex-grow: 1;
			}
			// 子菜单 ul.e-menu-subnav
			.e-menu-subnav {
				display: flex;
				flex-direction: column; 
				flex-grow: 1;
				padding: 0;
				margin: 0;
				list-style: none !important;
			}

			// 子菜单外的div.e-menu-submenu
			.e-menu-inner,
			.e-menu-submenu {
				display: none;
				float: none;
				margin: 0;
				padding: 0;
				@if e-get($base-config, mode) == "tablet-and-mobile" or e-get($base-config, mode) == "mobile" {
					width: auto !important;
				} 
			}

			// item
			.e-menu-item {
				display: flex;
				flex-direction: column; 
				flex-grow: 1;
				float: none;
				padding: 0;

				// 链接
				> .e-menu-link {
					display: flex;
					flex-grow: 1;
					align-items: stretch;
					margin: 0;	
					padding: 0;				
					text-decoration: none;
					position: relative;	
					outline: none;					
					
					&:hover {
						text-decoration: none;
						cursor: pointer;
					}

					.e-menu-link-text {
						display: flex;
						align-items: center;
						flex-grow: 1;
						padding: 0;
					}

					.e-menu-link-badge {
						display: flex;
						align-items: center;
						white-space: nowrap;				
					}

					// 图标 & 横线图标
					.e-menu-link-icon,
					.e-menu-link-bullet,
					.e-menu-ver-arrow{
						display: flex;
						align-items: center;
						line-height: 0;
					}

					// 箭头
					.e-menu-ver-arrow {
						justify-content: flex-end;
						&:before {
							-webkit-transform: translate3d(0,0,0);  
						}				
					}

					.e-menu-hor-arrow {
						display: none;
					}
				}

				// 打开的菜单
				&.e-menu-item--open {
					> .e-menu-link {
						> .e-menu-ver-arrow {
							&:before {  
								transform: rotateZ(90deg)#{'/*rtl:ignore*/'};

								[direction="rtl"] & {
									transform: rotateZ(-90deg)#{'/*rtl:ignore*/'};
								}
							}
						}
					}

					> .e-menu-submenu,
					> .e-menu-inner {
						display: flex;
						flex-grow: 1;
						flex-direction: column; 
					}
				}

				// 子菜单 div.e-menu-submenu
				.e-menu-submenu {
					// item
					.e-menu-item {
						> .e-menu-link {
							padding: e-get($layout, default, item, submenu, item, link, padding);
						}
					}

					// parent item used for minimized menu's dropdown submenus
					.e-menu-item--parent {
						display: none;
					}
				}
			}

			> .e-menu-item {
				position: relative;
				@include e-menu-ver-item-base(e-get($layout, default, item));

				.e-menu-submenu {
					.e-menu-subnav {
						@include e-attr(margin, e-get($layout, default, item, submenu, self, margin));
						@include e-attr(padding, e-get($layout, default, item, submenu, self, padding));
					}

					// item
					.e-menu-item {
						@include e-menu-ver-item-base(e-get($layout, default, item, submenu, item));
					}
				}
			}

			// item 的 padding
			$item-link-padding: e-get($layout, default, item, link, self, padding);

			// item 子菜单往右缩进px
			$item-submenu-padding-left: e-get($layout, default, item, submenu, item, link, self, padding-x);
			// 子菜单文字缩进，将根据菜单深度计算对应的缩进，最高*3
			$item-submenu-indent: e-get($layout, default, item, submenu, self, indent);
			// 子菜单padding
			$item-submenu-link-padding: e-get($layout, default, item, submenu, item, link, self, padding);

			> .e-menu-item {
				> .e-menu-link {
					padding: $item-link-padding;
				}

				> .e-menu-submenu {
					.e-menu-subnav {
						> .e-menu-item {
							> .e-menu-link {
								padding: $item-submenu-link-padding;
								padding-left: $item-submenu-padding-left + (1 * $item-submenu-indent); 
							}

							> .e-menu-submenu {
								padding: 0;

								.e-menu-subnav {
									padding: 0;

									> .e-menu-item {
										> .e-menu-link {
											padding: $item-submenu-link-padding;
											padding-left: $item-submenu-padding-left + (2 * $item-submenu-indent); 
										}   

										> .e-menu-submenu {
											padding: 0;
											
											.e-menu-subnav {
												> .e-menu-item {
													> .e-menu-link {
														padding: $item-submenu-link-padding;
														padding-left: $item-submenu-padding-left + (3 * $item-submenu-indent); 
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}	
	}
}
// Base 皮肤
@mixin e-menu-ver-skin($base-config, $layout) {
	.#{e-get($base-config, class)} {
		@include e-attr(background-color, e-get($layout, default, self, bg-color));

		.e-menu-nav {
			// item
			> .e-menu-item {
				@include e-menu-ver-item-skin(e-get($layout, default, item));

				> .e-menu-arrow {
					color: e-get($layout, default, self, bg-color);
				}
			}

			// item
			> .e-menu-item {
				.e-menu-submenu {
					.e-menu-subnav {
						@include e-attr(background-color, e-get($layout, default, item, submenu, self, bg-color, default));
					}
					// item
					.e-menu-item {
						@include e-menu-ver-item-skin(e-get($layout, default, item, submenu, item));
					}
				}
			}
		}	
	}
}

// Minimize
@mixin e-menu-ver-minimize-base($base-config, $layout) {
	.#{e-get($base-config, class)} {
		.e-menu-nav {
			padding: e-get($layout, minimize, self, padding);

			> .e-menu-item {
				> .e-menu-link {
					.e-menu-link-icon {
						width: 100%;
					}

					.e-menu-link-bullet {
						display: none;
					}

					.e-menu-link-text {
						display: none;
					}

					.e-menu-link-badge {
						padding: 0;
						position: relative;
						right: e-get($layout, minimize, item, link, badge, right);

						.e-badge {
							text-indent: -9999px;
							position: relative;
							padding: 0;
							min-width: e-get($layout, minimize, item, link, badge, size);
							width: e-get($layout, minimize, item, link, badge, size);
							min-height: e-get($layout, minimize, item, link, badge, size);
							height: e-get($layout, minimize, item, link, badge, size);
						}
					}

					.e-menu-ver-arrow {
						display: none;
					}
				}

				> .e-menu-submenu {
					display: none !important;
				}

				&.e-menu-item--here {
					> .e-menu-arrow {
						display: inline-block;
					}
				}

				&.e-menu-item--hover {
					position: relative;
					z-index: e-get($layout, minimize, item, self, zindex);
					width: e-get($layout, minimize, item, self, width);

					&.e-menu-item--open {
						background: transparent;
					}

					> .e-menu-link {
						width: e-get($layout, minimize, self, width);

						.e-menu-link-title {
							display: none;
						}
					}

					> .e-menu-submenu {
						top: 0;
						bottom: auto;
						display: flex !important;
						margin-left: e-get($layout, minimize, item, submenu, self, margin-left) !important;

						@if e-has($layout, minimize, item, submenu) {
							.e-menu-subnav {
								> .e-menu-item.e-menu-item--parent {
									display: flex;
									@include e-menu-ver-minimize-parent-item-base( e-get($layout, minimize, item, submenu, parent-item) );

									& + .e-menu-item {
										margin-top: e-get($layout, minimize, item, submenu, parent-item, link, self, margin-bottom);
									}
								}
							}
						}
					}

					> .e-menu-arrow {
						display: none;
					}
				}
			}
		}
	}
}

@mixin e-menu-ver-minimize-skin($base-config, $layout) {
	.#{e-get($base-config, class)} {
		.e-menu-nav {
			> .e-menu-item {
				background: transparent;

				> .e-menu-link {
					background-color: e-get($layout, minimize, item, link, self, bg-color, default);

					> .e-menu-link-icon {
						color: e-get($layout, minimize, item, link, icon, font-color, default);
					}
				}

				&.e-menu-item--hover,
				&.e-menu-item--open {
					background: transparent !important;

					> .e-menu-link {
						background-color: e-get($layout, minimize, item, link, self, bg-color, open);

						> .e-menu-link-icon {
							@include e-attr(color, e-get($layout, minimize, item, link, icon, font-color, open));
						}
					}
				}

				&.e-menu-item--here,
				&.e-menu-item--active {
					background: transparent !important;

					> .e-menu-link {
						background-color: e-get($layout, minimize, item, link, self, bg-color, active);

						> .e-menu-link-icon {
							@include e-attr(color, e-get($layout, minimize, item, link, icon, font-color, active));
						}
					}
				}

				&:hover {
					background: transparent;

					> .e-menu-link {
						background-color: e-get($layout, minimize, item, link, self, bg-color, hover);

						> .e-menu-link-icon {
							@include e-attr(color, e-get($layout, minimize, item, link, icon, font-color, hover), !important);
						}
					}
				}

				@if e-has($layout, minimize, item, submenu) {
					&.e-menu-item--hover > .e-menu-submenu {
						.e-menu-subnav > .e-menu-item.e-menu-item--parent {
							display: flex;
							@include e-menu-ver-minimize-parent-item-skin( e-get($layout, minimize, item, submenu, parent-item) );
						}
					}
				}
			}
		}
	}
}

// 皮肤
@mixin e-menu-ver-build-skin($config, $skin) {
	$skin-config: ();

	@if ($skin == default) {
		$skin-config: e-get($config, build, skin);
	} @else {
		$skin-config: e-get($config, build, skins, $skin);
	} 
	@include e-menu-ver-skin((class: e-get($config, base, class)), $skin-config);
}

// 布局
@mixin e-menu-ver-build-layout( $config ) {
	// Base
	@include e-menu-ver-base( e-get($config, base), e-get($config, build, layout) );
	// 收起状态
	@include e-desktop {
		.#{e-get($config, base, parent-class)}--minimize {
			@include e-menu-ver-minimize-base( e-get($config, base), e-get($config, build, layout) );
		}
	}
}